<template>
  <div class="client-search-table">
    <a-table :columns="columns"
      :data-source="clients"
      size="small"
      :pagination="pagination"
      :scroll="{ x: 1330 , y: 500}">
      <span slot="operation" slot-scope="text, record">
        <a-button size="small" type="primary" @click="modifyClient(text, record)">
          修改
        </a-button>
      </span>
    </a-table>
  </div>
</template>

<script>
import {
  clientSearchColumns
} from './init/tableInit.js';

export default {
  name: "ClientSearchTable",
  props: {
  },
  data() {
    return {
      columns: clientSearchColumns,
      clients: [],
      pagination: {
        pageSize: 20,//每页中显示20条数据
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
        showTotal: total => `共有 ${total} 位客户`,  //分页中显示总的数据
      }
    };
  },
  computed: {
  },
  mounted() {
    this.updateClients();
  },
  watch: {
    '$store.state.clientsCache' () {
      this.updateClients();
    }
  },
  methods: {
    modifyClient(text, record) {
      this.$router.push({
        name: 'ClientCheck',
        params: {
          id: record.key
        },
      })
    },
    /**
     * 更新clients数据，路由跳转或第一次加载
     */
    updateClients(){
      this.clients = this.$store.state.clientsCache.map((value) => {
        value.key = value.id;
        return value;
      });
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.client-search-table {

}
</style>
